<template>
  <div class="onShelfBycase">
    <div class="common-loading" v-show="loadings.form">
      <van-loading type="spinner" color="#ed6d00" />
    </div>
    <van-nav-bar title="质检 - 按件上架" left-text="返回" @click-left="goBack"></van-nav-bar>
    <van-form :show-error-message="false" class="common-form">
      <van-field
        v-model="form.locationPropertiesName"
        label="库位属性"
        disabled
        v-if="form.locationCode && form.locationId"
        class="locationPropertiesName"
      />
      <van-field
        ref="locationCode"
        id="locationCode"
        v-model="form.locationCode"
        label="库位"
        placeholder="请扫描库位"
        :rules="[{required: true, message: '请扫描库位'}]"
        @keydown.enter.native="!pdaScanData.data ? scanPieceLocation() : ''"
        @focus="disableKeyboard('locationCode')"
        @click="disableKeyboard('locationCode')"
        :readonly="readOnlys.locationCode"
      />
      <van-field
        ref="cartonNumber"
        id="cartonNumber"
        v-model="form.cartonNumber"
        label="箱号"
        placeholder="请扫描箱号"
        @keydown.enter.native="!pdaScanData.data ? scanBoxNumber() : ''"
        @focus="disableKeyboard('cartonNumber')"
        @click="disableKeyboard('cartonNumber')"
        :readonly="readOnlys.cartonNumber"
        :rules="[{required: true, message: '请扫描箱号'}]"
      />
      <van-field
        ref="barCode"
        id="barCode"
        v-model="form.barCode"
        label="SKU"
        placeholder="请扫描SKU"
        @keydown.enter.native="!pdaScanData.data ? scanPieceSku() : ''"
        @focus="disableKeyboard('barCode')"
        @click="disableKeyboard('barCode')"
        :readonly="readOnlys.barCode"
        :rules="[{required: true, message: '请扫描SKU'}]"
      />
      <van-row type="flex" class="onShelfBycase__num">
        <van-col span="8">
          可上架: <span>{{ form.planPutawayQty }}</span> 件
        </van-col>
        <van-col span="8">
          已上架: <span>{{ form.actPutawayQty }}</span> 件
        </van-col>
        <van-col span="8">
          差异: <span class="red">{{ form.difPutawayQty }}</span> 件
        </van-col>
      </van-row>
    </van-form>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import {scanPieceLocation, scanBoxNumber, scanPieceSku} from "@/api/biz/quality/quality.js";
export default {
  name: "OnShelfBycase",
  data() {
    return {
      form: {
        locationPropertiesName: "",
        locationId: "",
        locationPropertiesId: "",
        locationCode: "",
        cartonNumber: "",
        barCode: "",
        planPutawayQty: 0,
        actPutawayQty: 0,
        difPutawayQty: 0
      },
      readOnlys: {
        locationCode: false,
        cartonNumber: false,
        barCode: false
      },
      loadings: {
        form: false
      }
    };
  },
  mounted() {
    this.$refs.locationCode.focus();
  },
  watch: {
    pdaScanData: {
      handler(data) {
        let input = document.activeElement.id;
        if (input == "locationCode") {
          this.form.locationCode = data.data;
          this.scanPieceLocation();
        } else if (input == "cartonNumber") {
          this.form.cartonNumber = data.data;
          this.scanBoxNumber();
        } else if (input == "barCode") {
          this.form.barCode = data.data;
          this.scanPieceSku();
        }
      },
      deep: true
    }
  },
  computed: {
    ...mapGetters("scanner", ["pdaScanData"]),
    ...mapGetters("user", ["userData"]),
    storerId() {
      return this.$root.storerWarehouseBrand.storerId;
    },
    wareHouseId() {
      return this.$root.storerWarehouseBrand.warehouseId;
    },
    brandId() {
      return this.$root.storerWarehouseBrand.brandId;
    },
    isValueEmpty() {
      let arry = ["locationCode", "cartonNumber", "barCode"];
      let flag = true;
      for (let i = 0; i < arry.length; i++) {
        if (!this.form[arry[i]]) {
          flag = false;
          break;
        }
      }
      return flag;
    }
  },
  methods: {
    check() {
      let arry = ["locationCode", "cartonNumber", "barCode"];
      let flag = true;
      arry.forEach(item => {
        if (flag && !this.form[item]) {
          this.$nextTick(() => {
            setTimeout(() => {
              this.$refs[item].focus();
            }, 300);
          });
          flag = false;
        }
      });
    },
    focusInput(name) {
      this.$nextTick(() => {
        setTimeout(() => {
          this.$refs[name].focus();
        }, 300);
      });
    },
    // 禁用键盘
    disableKeyboard(name) {
      this.readOnlys[name] = true;
      setTimeout(() => {
        this.readOnlys[name] = false;
      }, 200);
    },
    scanPieceLocation() {
      if (this.form.locationCode === "") {
        this.focusInput("locationCode");
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        wareHouseId: this.wareHouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        locationCode: this.form.locationCode // "库位Code"
      };
      this.loadings.form = true;
      scanPieceLocation(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // 成功操作
            let res = response.data.data;
            this.form.locationId = res.locationId;
            this.form.locationPropertiesId = res.locationPropertiesId;
            this.form.locationPropertiesName = res.locationPropertiesName;
            this.form.cartonNumber = "";
            this.form.barCode = "";
          } else {
            this.$toast.fail(response.data.message);
            this.form.locationCode = "";
          }
          this.check();
        })
        .catch(() => {
          this.loadings.form = false;
          this.form.locationCode = "";
          this.$toast.fail("请求出错！");
        });
    },
    scanBoxNumber() {
      if (this.form.locationCode === "") {
        this.form.cartonNumber = "";
        this.focusInput("locationCode");
        return;
      }
      if (this.form.cartonNumber === "") {
        this.focusInput("cartonNumber");
        return;
      }
      let params = {
        storerId: this.storerId, // "货主ID",
        wareHouseId: this.wareHouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        locationId: this.form.locationId, // "库位ID",
        locationPropertiesId: this.form.locationPropertiesId, // "库位属性ID",
        cartonNumber: this.form.cartonNumber, // "箱号",
        loginName: this.userData.sysUserLoginName // "操作人名称"
      };
      this.loadings.form = true;
      scanBoxNumber(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // 成功操作
            this.form.barCode = "";
            this.form.planPutawayQty = Number(response.data.data.planPutawayQty);
            this.form.actPutawayQty = Number(response.data.data.actPutawayQty);
            this.form.difPutawayQty = Number(this.form.actPutawayQty) - Number(this.form.planPutawayQty);
          } else {
            this.$toast.fail(response.data.message);
            this.form.cartonNumber = "";
          }
          this.check();
        })
        .catch(() => {
          this.loadings.form = false;
          this.$toast.fail("请求出错！");
          this.form.cartonNumber = "";
        });
    },
    scanPieceSku() {
      if (this.form.locationCode === "") {
        this.form.cartonNumber = "";
        this.form.barCode = "";
        this.focusInput("locationCode");
        return;
      }
      if (this.form.cartonNumber === "") {
        this.form.barCode = "";
        this.focusInput("cartonNumber");
        return;
      }
      if (this.form.barCode === "") {
        this.focusInput("cartonNumber");
        return;
      }
      let params = {
        barCode: this.form.barCode,
        storerId: this.storerId, // "货主ID",
        wareHouseId: this.wareHouseId, // "仓库ID",
        brandId: this.brandId, // "品牌ID",
        locationId: this.form.locationId, // "库位ID",
        locationPropertiesId: this.form.locationPropertiesId, // "库位属性ID",
        cartonNumber: this.form.cartonNumber, // "箱号",
        loginName: this.userData.sysUserLoginName // "操作人名称"
      };
      this.loadings.form = true;
      scanPieceSku(params)
        .then(response => {
          this.loadings.form = false;
          if (response.data.status) {
            // 成功操作
            this.$toast.success(response.data.message);
            this.form.actPutawayQty++;
            this.form.difPutawayQty = Number(this.form.actPutawayQty) - Number(this.form.planPutawayQty);
            if (this.form.difPutawayQty === 0) {
              this.form.locationCode = "";
              this.form.cartonNumber = "";
              this.form.barCode = "";
              this.form.planPutawayQty = 0;
              this.form.actPutawayQty = 0;
              this.form.difPutawayQty = 0;
            } else {
              this.form.barCode = "";
            }
          } else {
            this.$toast.fail(response.data.message);
            this.form.barCode = "";
          }
          this.check();
        })
        .catch(() => {
          this.loadings.form = false;
          this.$toast.fail("请求出错！");
          this.form.barCode = "";
        });
    },
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>
<style lang="less" scoped>
.onShelfBycase {
  .locationPropertiesName {
    /deep/ .van-field__control {
      color: red;
      font-weight: bold;
      font-size: 18px;
    }
  }
  &__num {
    padding: 10px 16px;
    font-size: 14px;
    color: #333;
    span {
      margin-left: 8px;
      margin-right: 4px;
    }
    .red {
      color: red;
    }
  }
}
</style>
